<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="${ctxPath}/component/pear/css/pear.css"/>
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .div-zy{background-color: #ffffff;padding: 5px 10px;position: relative}
        .title11{color: #039091!important;}
        .layui-tab{margin: 0;}
        hr{margin: 7px 0px;}
        .box .layui-tab-brief>.layui-tab-title .layui-this{color: #FFFFFF!important;}
        .box .layui-tab-brief>.layui-tab-more li.layui-this:after,.box .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 3px solid #FFFFFF!important;}
        .box .zy-select-this {background-color: #D1E9E9!important;}
        .layui-layer-content{
            overflow: hidden!important;
        }
        .title11{ white-space: nowrap;text-overflow: ellipsis;width: 18rem;overflow: hidden;font-size: 15px;font-weight: bold;}
        #page{ position: fixed;left: 50%;transform: translateX(-50%);width: 100%;bottom: -5px;text-align: center}
        #page2{ position: fixed;left: 50%;transform: translateX(-50%);width: 100%;bottom: -5px;text-align: center}
        #div-wz{}
        .layui-box a{background-color: transparent;}
        input::-webkit-input-placeholder{color: #039091;}
        .map-right-box .layui-form-content{padding: 0px 10px;}
        .layui-content-box {background-color: #D1E9E9;padding: 5px;}
        .layui-content-box .layui-right-container{padding: 5px 10px;}
        .layui-content-box .layui-right-container p{font-size: 14px;color: #404747;}
        .layui-content-box .layui-right-container .info-desc{
            font-size: 14px;
            color: #404747;
            padding-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 310px;
        }
        .layui-content-box .layui-right-container .layui-top-content{display: flex;justify-content: space-between;}
        .layui-content-box .layui-right-container .layui-top-content .img-box{display: flex;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box{display: flex;flex-direction: column;justify-content: space-around;}
        .layui-content-box .layui-right-container .layui-top-content .img-box  img{width: 50px;height: 50px;border: 2px solid #0FF0FF;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box {padding-left: 5px;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box .info-title{font-size: 14px;color: #039091;font-weight: bold;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box .info-time{color: #1F2323}
        .layui-content-box .layui-right-container .layui-top-content .examine span{color: #fff;cursor: pointer;border: 1px solid #FAA307;border-radius: 3px;padding: 3px 5px;transition: 0.3s ease-out;background-color: #FAA307;}
        .layui-content-box .layui-right-container .layui-top-content .examine span:hover{color: #fff;border: 1px solid #FF5722;background-color: #FF5722; transition: 0.3s ease-out}
        .map-left-box{height: 95%;width: 360px;background-color: rgba(2,134,144,0.8);position: fixed;z-index: 99999 !important;top: 50%;transform: translateY(-50%);left: 10px;border-radius: 10px;}
        .map-right-box{height: 95%;width: 360px;background-color: rgba(2,134,144,0.8); position: fixed;z-index: 99999 !important;top: 50%;transform: translateY(-50%);right: 10px;border-radius: 10px;}
    </style>

</head>
<body>
<div class="map-left-box box">
    <div class="layui-card-body" style="padding: 0 5px;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="padding: 0 5px">
            <ul class="layui-tab-title" style="text-align: center;">
                <li class="layui-this">进行中作业</li>
                <li>全部作业</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="zy-jxz">

                </div>
                <div class="layui-tab-item" id="zy-qb"></div>
            </div>
        </div>
        <div id="page"></div>
    </div>
</div>
<div class="map-right-box box">
    <div class="layui-card-body" style="padding: 0 5px;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="padding: 0 5px">
            <ul class="layui-tab-title" style="text-align: center;">
                <li class="layui-this">违章事件(待处理)</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="div-wz">

                </div>
            </div>
        </div>
        <div id="page2"></div>
    </div>
</div>
<div id="container">

</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="//api.map.baidu.com/api?type=web&v=2.0&ak=UP9aRFsRMlAGV744QkpSoChSY0KeIzb8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dictionary','element', 'laydate', 'laypage'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let laypage = layui.laypage;
        let element = layui.element
        let SYS_PATH = "${ctxPath}/";
        let VIEW_PATH = "${ctxPath}/wzgl/view/";

        var map = new BMap.Map('container'); // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.946852,38.930559), 10);
        map.enableScrollWheelZoom(true);

        map.addEventListener('click',function (e){
            var allOverlay  = map.getOverlays();
            console.log(allOverlay.length);
        })

        var planid,marker,coordinate=[],oldplanId='';

        laydate.render({
            elem: '#date1'
            ,type: 'datetime'
            ,range: true //或 range: '~' 来自定义分割字符
        })
        toPage(1,1,true);
        loadAllzyCoordinates(1);

        window.onresize=function (){
            $("#card1").css("height", $(".layui-table-view").height() + 160);
        }
        function toPage(page,status,flag){
            $.ajax({
                url: SYS_PATH+'busOperationplan/data/list?page='+page+'&limit=5&status='+status,
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (result.code == 0) {
                        var html='';
                        for (n in result.data){
                            var jobcontent=result.data[n].jobContent.replace(/\s+/g, "").replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
                            if (jobcontent.length>20){
                                jobcontent=jobcontent.substring(0,20)+'...'
                            }
                            var ppid=result.data[n].id;
                            html +='<ul class="div-zy" plan-id="'+result.data[n].id+'" coordinate="'+result.data[n].coordinate+'">\n' +
                                '                        <li class="title">\n' +
                                '                            <div class="title11" title="'+result.data[n].jobContent+'">\n' +
                                '                                '+jobcontent+'\n' +
                                '                            </div>\n';
                            if (ppid!='-1'){
                                html += '<span  onclick="ssVideo(\''+jobcontent+'\',\''+result.data[n].id+'\')" style="position: absolute;right: 10px;top: 5px; cursor: pointer"\n' +
                                    '                                  class="video-show">\n' +
                                    '                                                    <i class="layui-icon"\n' +
                                    '                                                       style="display: inline-block;vertical-align: middle;width: 20px;height: 20px;background-size: 100%;background-image: url(\'${ctxPath}/admin/images/sxt2.png\');background-position: center"></i>\n' +
                                    '                                                    <a href="#"\n' +
                                    '                                                       style="color: #006865;display: table-cell;vertical-align: middle">('+result.data[n].sxtsl+')</a>\n' +
                                    '                                                </span>\n';
                            }else{
                                html +='<span style="position: absolute;right: 10px;top: 5px; cursor: pointer"\n' +
                                    '                                  class="video-show">\n' +
                                    '                                                    <i class="layui-icon"\n' +
                                    '                                                       style="display: inline-block;vertical-align: middle;width: 20px;height: 20px;background-size: 100%;background-image: url(\'${ctxPath}/resource/wzgl/sxt3.png\');background-position: center"></i>\n' +
                                    '                                                    <a href="#"\n' +
                                    '                                                       style="color: #8a8a8a;display: table-cell;vertical-align: middle">('+result.data[n].sxtsl+')</a>\n' +
                                    '                                                </span>\n';
                            }
                             html +='                        </li>\n' +
                                '                        <li class="content">\n' +
                                '                            作业单位：'+result.data[n].constructionManagementUnit+'\n' +
                                '                        </li>\n' +
                                '                        <li class="content">\n' +
                                '                            作业风险等级：'+result.data[n].zyfxdj+'\n' +
                                '                        </li>\n' +
                                '                        <li class="content">\n' +
                                '                            '+layui.util.toDateString(result.data[n].startTime,'MM-dd HH:mm')+'至'+layui.util.toDateString(result.data[n].endTime,'MM-dd HH:mm')+'\n' +
                                '                        </li>\n' +
                                '                        <li class="content">\n' +
                                '                                    <span style="color: orangered;">违规<span style="margin-left: 5px"\n' +
                                '                                                                            class="layui-badge">'+result.data[n].wgCount+'</span></span>\n' +
                                '                            <span style="color: #006865;margin-left: 10px">待确认违规<span style="margin-left: 5px"\n' +
                                '                                                                                      class="layui-badge layui-bg-green">'+result.data[n].dqrwgCount+'</span></span>\n' +
                                '                        </li>\n' +
                                '                    </ul>\n' +
                                '                    <hr class="layui-bg-green">';
                        }
                        if (status===1){
                            $("#zy-jxz").html(html);
                            if($("#zy-jxz").children().length>0){
                                $("#zy-jxz").children()[0].click(); // 加载完成选中第一个

                            }
                        } else{
                            $("#zy-qb").html(html);
                            if($("#zy-qb").children().length>0){
                                $("#zy-qb").children()[0].click(); // 加载完成选中第一个
                            }

                        }
                        if (flag){
                            if (result.data.length>0){
                                zdyPage(result.count,status);
                            } else{
                                zdyPage(3,status);
                            }
                        }
                    } else {

                    }
                }
            })
        }

        function zdyPage(count){
            laypage.render({
                elem: 'page'
                , count: count
                , limit: 5
                , groups: 3
                , prev: '<'
                , next: '>'
                , first: false
                , last: false
                , layout: ['prev', 'page', 'next']
                , jump: function (obj, first) {
                    if (!first) {
                        toPage(obj.curr,status,false);
                    }
                }
            });
        }

        $(document).on('click','.div-zy',function () {
            $(".div-zy").removeClass("zy-select-this");
            $(this).addClass("zy-select-this");
            planid=$(this).attr("plan-id");
            $("#operationPlanid").val(planid);//设置选中的值
            var jobContent=$(this).children(0).children("div").text();
            jobContent=jobContent.replace(/\s+/g, "").replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
            loadWz(1,planid,jobContent,true);
            //清楚指定覆盖物
            var allOverlay  = map.getOverlays();
            console.log(allOverlay.length,oldplanId);
            for (var i = 0; i < allOverlay.length; i++) {
                if (allOverlay[i].id == planid) {
                    allOverlay[i].hide();
                }else if(allOverlay[i].id == "p"+oldplanId){
                    map.removeOverlay(allOverlay[i]);
                }else{
                    allOverlay[i].show();
                }
            }
            //添加当前作业覆盖物
            var coordinate=$(this).attr("coordinate").replace(/\s+/g, "").split(',');
            var point;
            if (coordinate.length==2){
                point = new BMap.Point(coordinate[0].replace(/'/g, ''),coordinate[1].replace(/'/g, ''));
                let size = new BMap.Size(28, 32),
                    offset = new BMap.Size(0, -13),
                    imageSize = new BMap.Size(28, 32),
                    icon = new BMap.Icon("../../admin/images/zy2.png", size, {
                        imageSize: imageSize
                    });
                var marker = new BMap.Marker(point, {
                    icon: icon,
                    offset: offset
                });
                map.panTo(point);
                var id="p"+planid;
                marker.id=id;
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                oldplanId=planid;
            }
        })

        window.addZyMarker=function (id,point){
            var size = new BMap.Size(28, 32),
                offset = new BMap.Size(0, -13),
                imageSize = new BMap.Size(28, 32),
                icon = new BMap.Icon("../../admin/images/zy1.png", size, {
                    imageSize: imageSize
                });
            coordinate=point.replace(/\s+/g, "").split(',');
            point=new BMap.Point(coordinate[0].replace(/'/g, ''),coordinate[1].replace(/'/g, ''));
            var zymarker = new BMap.Marker(point, {
                icon: icon,
                offset: offset
            });
            zymarker.id=id;
            map.addOverlay(zymarker);
        }
        function loadAllzyCoordinates(status){
            console.log("初始化");
            map.clearOverlays();
            if (status==0){
                status='';
            }
            $.ajax({
                url: SYS_PATH + "busOperationplan/data/loadAllzyCoordinates?status="+status,
                dataType: 'json',
                data: {},
                type: 'get',
                success: function (result) {
                    if (result.length>0){
                        for (var i=0;i<result.length;i++){
                            if(result[i].coordinate!=null){
                                addZyMarker(result[i].id,result[i].coordinate);
                            }
                        }
                    }
                }
            });
        }

        window.loadWz=function (page,plan_id,jobContent,flag){
            $.ajax({
                url: SYS_PATH + "busOperationplan/data/wzList?page="+page+"&limit="+5,
                dataType: 'json',
                data: {planid:plan_id,state:0},
                type: 'get',
                success: function (result) {
                    var html='';
                    if(result&&result.data.length>0){
                        for(let i=0;i<result.data.length;i++){
                            html +='<ul class="layui-content-box">\n' +
                                '                        <li class="layui-right-container">\n' +
                                '                            <div class="layui-top-content">\n' +
                                '                                <div class="img-box">\n' +
                                '                                    <img src="${ctxPath}/admin/images/Green9-20.png" width="50px" height="50px">\n' +
                                '                                    <div class="info-box">\n' +
                                '                                        <span class="info-title">'+result.data[i].eventName+'</span>\n' +
                                '                                        <span class="info-time">'+result.data[i].createTime+'</span>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                                <div class="examine" onclick="showSh(\''+result.data[i].id+'\',\''+result.data[i].imagePath+'\',\''+result.data[i].videoPath+'\',\''+result.data[i].eventName+'\',\''+plan_id+'\',\''+jobContent+'\')">\n' +
                                '                                    <span>审核</span>\n' +
                                '                                </div>\n' +
                                '                            </div>\n' +
                                '                            <div class="info-desc">\n' +
                                '                                <p title="'+jobContent+'"> 归属作业：'+jobContent+'</p>\n' +
                                '                            </div>\n' +
                                '                            <div class="info-desc">\n' +
                                '                                <p> 作业单位：'+result.data[i].construction_name+'</p>\n' +
                                '                            </div>\n' +
                                '                        </li>\n' +
                                '                    </ul>\n' +
                                '                    <hr class="layui-bg-green">';
                        }
                        if (flag){
                            zdyPage2(result.count,plan_id,jobContent);
                        }
                        $("#div-wz").html(html);
                    }else{
                        if (flag){
                            zdyPage2(1,plan_id,jobContent);
                        }
                        $("#div-wz").html("<div style='text-align: center;color: #fff'>暂无数据</div>");
                    }
                }
            });
        }

        function zdyPage2(count,plan_id,jobContent){
            laypage.render({
                elem: 'page2'
                , count: count
                , limit: 5
                , groups: 3
                , prev: '<'
                , next: '>'
                , first: false
                , last: false
                , layout: ['prev', 'page', 'next']
                , jump: function (obj, first) {
                    if (!first) {
                        loadWz(obj.curr,plan_id,jobContent,false);
                    }
                }
            });
        }

        element.on('tab(docDemoTabBrief)', function(data){
            if (data.index===0){
                toPage(1,1,true);
                loadAllzyCoordinates(1);
            }else{
                toPage(1,'',true);
                loadAllzyCoordinates(0);
            }
        });

        window.ssVideo=function (title,id) {
            layer.open({
                type: 2,
                title: '实时视频浏览-'+title,
                skin: 'test-show',
                shade: 0.4,
                area: ['1400px', '705px'],
                content: VIEW_PATH + 'video?plan_id='+id
            });
        }

        window.showSh=function (id,imagePath,videoPath,eventName,plan_id,jobContent) {
            var shHtml = '<div class="layui-tab layui-tab-brief" style="width: 900px;height: 560px;padding: 0px 10px"  lay-filter=""><input type="hidden" id="wzid" value="'+id+'">\n' +
                '  <ul class="layui-tab-title">\n' +
                '    <li class="layui-this">图片</li>\n' +
                '    <li>视频</li>\n' +
                '  </ul>\n' +
                '  <div class="layui-tab-content">\n' +
                '    <div class="layui-tab-item layui-show"><img src="'+imagePath+'" onerror="javascript:this.src=\'${ctxPath}/static/resource/images/pic404.png\'" width="900px" height="500px"/></div>\n' +
                '    <div class="layui-tab-item"><video height="500" width="900" controls autoplay autobuffer loop><source src="'+videoPath+'" type="video/mp4"></source></video></div>\n' +
                '  </div>\n' +
                '</div> ';
            layer.open({
                type: 1,
                btn: ['消警', '确认']
                , btn1: function (index1) {
                    var id=$("#wzid").val();
                    layer.confirm('确定要消警该条记录', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        $.ajax({
                            url: SYS_PATH + "busOperationplan/data/wzqr?id=" + id+"&state=2",
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                if (result.code == 0) {
                                    layer.msg("操作成功", {time: 1000, icon: 6});
                                    layer.close(index);
                                    layer.close(index1);
                                    loadWz(1,plan_id,jobContent,true);
                                } else {
                                    layer.msg("操作失败", {time: 1000, icon: 6});
                                    layer.close(index);
                                }
                            }
                        })
                    });
                }
                , btn2: function (index1) {
                    var id=$("#wzid").val();
                    layer.confirm('确定要确认该条记录', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        $.ajax({
                            url: SYS_PATH + "busOperationplan/data/wzqr?id=" + id+"&state=1",
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                if (result.code == 0) {
                                    layer.msg("操作成功", {time: 1000, icon: 6});
                                    layer.close(index);
                                    layer.close(index1);
                                    loadWz(1,plan_id,jobContent,true);
                                } else {
                                    layer.msg("操作失败", {time: 1000, icon: 6});
                                    layer.close(index);
                                }
                            }
                        })

                    });
                },
                shadeClose: true,
                scrollbar: false,
                title: "审核预览-"+eventName,
                content: shHtml
            })
        }
    })
</script>
</body>
</html>
